<style>
  .icon-time {
    height: 54px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 3px 0px rgba(202, 213, 224, 0.8);
    border-radius: 4px;
    margin-top: 14px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    color: #EA733D;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 6px;
  }

  .icon-time i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #EA733D;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
		color: #fff;
  }

  .section_title {
    color: #929ba8;
    font-size: 14px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
  }

  .section_title span {
    display: flex;
    align-items: center;
  }

  .section_detail {
    padding: 24px 0;
    position: relative;
  }

  .color-E98667 {
    color: #e98667;
  }

  .section_detail .icon {
    width: 14px;
    height: 14px
  }

  .section_detail .aside {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 10px;
    font-size: 16px;
  }

  .clo-detail-2 {
    display: flex;
    margin-bottom: 16px;
  }

  .clo-detail-2 li {
    width: 300px;
    color: #666;
    margin-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .clo-detail-2 li:last-child {
    width: auto;
  }
  .clo-detail-2 li span:first-child{
    color: #999
  }
  .clo-detail-2 li span:last-child{
    color: #666
  }
  .clo-detail-1 {
    color: #999;
    display: flex;
    align-items: center;
  }

  .clo-detail-1 span {
    color: #666;
  }

  .calendar-text {
    width: 120px;
    background: #fff;
  }

  .calendar-text .hl-date-text {
    box-shadow: none;
    border: none;
  }

  .icon-Gm-calendar:before {
    font-size: 14px;
    top: 10px;
  }

  .block {
    width: 100%;
    height: 1px;
    background: rgba(242, 242, 242, 1);
  }

  .table-header {
    width: 960px;
    height: 40px;
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(234, 234, 234, 1) 100%);
    display: flex;
    font-size: 14px;
    color: #A5AAB7;
  }

  .table-type-default .table-main-row {
    width: 960px;
    display: flex;
    border: 1px solid #E8E5E2;
    border-top: none;
    border-right: none;
  }

  .table-type-default .table-main-row span {
    margin: 5px;
  }

  .table-type-default .table-header li {
    text-align: center;
    line-height: 40px;

  }

  .table-type-default .table-main-row li {
    line-height: 40px;
    text-align: center;
    border-right: 1px solid #E8E5E2;
    padding:0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .table-main-row ul {
    border-right: 1px solid #E8E5E2;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .table-type-default .table-main-row ul li {
    border-bottom: 1px solid #E8E5E2;
    border-right: none;
  }

  .table-type-default .table-main-row ul li:last-child {
    border: none
  }

  .table-main-row ul li:last-child {
    border-bottom: none
  }

  .entry-style {
    width: 150px;
    height: 35px;
    margin-right: 10px;
    outline: none;
    text-indent: 5px;
    box-shadow: 0px 0px 4px 0px rgba(214, 214, 214, 0.75);
    border-radius: 6px;
    border: 1px solid rgba(229, 229, 229, 1);
  }

  .mark-yuce {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .yuce-contains {
    width: 615px;
    background-color: #fff;
    border-radius: 4px;
    position: relative;
  }

  .yuce-contains .title {
    line-height: 45px;
    text-align: center;
    height: 45px;
    font-size: 16px;
  }

  .yuce-contains .close {
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
  }

  .yuce-orge {
    background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    padding: 18px 30px 20px 30px;
    color: #999999
  }

  .yuce-orge div {
    padding-bottom: 20px;
    border-bottom: 1px solid #E8E8E8;
    margin-bottom: 18px;
  }

  .yuce-orge ul li {
    margin-bottom: 14px;
  }

  .yuce-orge ul li span {
    color: #666
  }

  .orge-footer {
    padding: 8px 0;
  }

  .total {
    height: 100%;
    display: flex;
    /* border-bottom: 1px solid #E8E5E2; */
    text-align: center;
  }

  .total li {
    height: 100%;
    padding:0 5px;
    border-right: 1px solid #E8E5E2;
    border-bottom: 1px solid #E8E5E2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }
  .goToContract{
    color:#337AB7;
    cursor: pointer;
  }
  .goToContract:hover{
    color: #23527c;
  }
  .box-i-shadow{
		box-shadow: 0 0 4px rgba(214,214,214,.75) inset;
	}
	.change-abs {
		display: block;
		width:46px;
		height:20px;
		background:#EA733D;
		border-radius:12px 2px 12px 2px;
		line-height: 20px;
		color: #fff;
		font-size: 12px;
		text-align: center;
		margin-left: 20px;
	}
</style>
<section class="pl-24 pr-24" id="commissionDetail" style="padding-bottom:100px;">
  <div class="hl-list-title">
    <h4>抽成管理-抽成详情</h4>
  </div>
  <div class="icon-time">
    <i class="icon-GM-bill"></i>
    帐期：{{detailData.beginDate | formatDate}} 至 {{detailData.endDate | formatDate}} 
		<span class="change-abs" v-if="detailData.contractAlterFlag == 'Y'">变更中</span>
		<div class="inline ml-5 relative init-hover" v-if="detailData.contractAlterFlag == 'Y'">
			<span class="icon-Gm-explain cursor color-999"></span> 
			<div class="init-tips color-999 font-14" style="line-height: 21px;">合同变更中的账单将冻结所有相关操作，直到变更完结或作废。</div>
		</div>
  </div>
  <div class="section_detail">
    <div class="aside">
      <span class="icon-GM-label color-E98667 icon"></span>
      <span class="text color-E98667" style="margin:0 24px 0 10px">{{detailData.commissonConfirmFlagName}}</span>
      <span class="text color-E98667">{{detailData.overdueStateName}}</span>
    </div>
    <div class="section_title">结算信息</div>
    <ul class="clo-detail-2">
      <li><span>管理编号：</span><span class="goToContract"  @click="goToContract"><a>{{detailData.contractMcode || '--'}}</a></span></li>
      <li><span>合同编号：</span><span class="goToContract"  @click="goToContract"><a>{{detailData.contractCcode || '--'}}</a></span></li>
    </ul>
    <ul class="clo-detail-2">
      <li><span>合同名称：</span><span>{{detailData.contractName || '--'}}</span></li>
      <li><span>客户名称：</span><span>{{detailData.customerName || '--'}}</span></li>
    </ul>
    <ul class="clo-detail-2">
      <li><span>客户简称：</span><span>{{detailData.customerShortName || '--'}}</span></li>
      <li><span>联系人：</span><span>{{detailData.customerLperson || '--'}} <span style="padding-left:10px"></span> {{detailData.customerPhone || '--'}}</span></li>
    </ul>
    <ul class="clo-detail-1">
      收款截止日：
      <span>{{date}}</span>
    </ul>
  </div>
  <div class="block" style="margin:6px  0"></div>
  <div class="section_detail">
    <div class="section_title">出租资源</div>
    <div class="section_title" style="margin:14px 0;color: #666">
      <span>单元({{acreage}}m²)</span>
      <span @click="isShowSettle = !isShowSettle" style="cursor: pointer;">{{isShowSettle?'收起':'展开'}}详情<span class="icon-Gm-next"
          style="margin-left:10px;font-size: 12px" :style="isShowSettle?'transform: rotate(90deg)':''"></span></span>
    </div>
    <div class="table-type-default" v-if="isShowSettle">
      <ul class="table-header">
        <li style="width:200px">项目</li>
        <li style="width:150px">楼栋</li>
        <li style="width:80px">楼层</li>
        <li style="width:530px">单元</li>
      </ul>
      <ul class="table-main-row" v-for="item in unitList">
        <li style="width:200px">{{item.projectName || '--'}}</li>
        <li style="width:150px">{{item.buildingName || '--'}}</li>
        <li style="width:80px">{{item.floorNum  || '--'}}</li>
        <li style="width:530px;display: flex; flex-wrap: wrap;justify-content: center">
          <!-- <span>{{item.unitName}}</span> -->
          {{item.unitName}}
        </li>
      </ul>
    </div>
  </div>
  <div class="section_detail">
    <div class="section_title">营业额明细</div>
    <div class="table-type-default">
      <ul class="table-header">
        <li style="width:168px">营业日期</li>
        <li style="width:280px">金额（元）</li>
        <li style="width:310px">备注</li>
        <li style="width:200px">出租资源</li>
      </ul>
      <ul class="table-main-row" v-for="item in detailData.turnoverInfoList" :style="{background:item.statusCode == 'WIPT'?'#EEEEF4':''}">
        <li style="width:168px">{{item.turnoverDate | formatDate}}</li>
        <li style="width:280px" :style="{color:item.statusCode == 'WIPT'?'#337AB7':''}" @click="goToTurnover(item.statusCode,item.id)">{{item.statusCode == 'WIPT'? '去录入':item.turnoverAmount }}</li>
        <li style="width:310px;">{{item.memo || '--'}}</li>
        <li style="width:200px;">{{ item.unitName ? item.unitName : '--' }}</li>
      </ul>
    </div>
    <div class="section_title" style="margin-top:14px">
      <span>营业额合计：
        <span style="color:#565E99;font-size:18px;margin-right: 5px">{{detailData.turnoverInfoListAmount | toFixed2 | formatNum}}</span>元（{{detailData.turnoverInfoListYIPTcount}}/{{detailData.turnoverInfoListWIPTcount+detailData.turnoverInfoListYIPTcount}}条）<span style="color: rgb(255, 102, 0);font-size: 14px" v-if="detailData.turnoverInfoListWIPTcount != 0">账期内营业额金额录入不全</span></span>
        <span></span>
    </div>
    <div class="section_title">
      <span v-if="detailData.commissonConfirmFlag == 'WTJ'" >营业额确认：<input   type="number" @focus="inputFocus" style="width: 150px;margin-right: 5px" class="form-control ct-number-ipt" @input="turnover_amount = turnover_amount.slice(0,12)"
          v-model="turnover_amount" > 元</span>
      <span v-if="detailData.commissonConfirmFlag == 'YTJ'">营业额确认：<span style="color:#565E99;font-size:18px;margin-right: 5px">{{detailData.turnoverAmount}}</span>元</span>
      <span></span>
    </div>
    <button type="button" class="btn n-btn-primary mr-10" @click="amountSubmit" v-if="detailData.commissonConfirmFlag == 'WTJ' && detailData.contractAlterFlag == 'N'">提交结算</button>
    <button type="button" class="btn n-btn-outline" @click="goToBill" v-if="detailData.commissonConfirmFlag == 'WTJ'">查看账单详情</button>
    <button type="button" class="btn n-btn-primary" @click="goToBill" v-if="detailData.commissonConfirmFlag == 'YTJ'">查看账单详情</button>
  </div>
  <div class="block"></div>
  <div v-if="commissionDetail.commissionRuleInfoList.length">
    <div class="section_detail">
      <div class="section_title">抽成结算</div>
      <div class="table-type-default">
        <ul class="table-header">
          <li style="width:137px">基数下限（＞元）</li>
          <li style="width:138px">基数上限（≤元）</li>
          <li style="width:103px">抽成比例（%）</li>
          <li style="width:109px">抽成下限（元）</li>
          <li style="width:111px">抽成上限（元）</li>
          <li style="width:106px">抽成小计（元）</li>
          <li style="width:128px">抽成金额合计（元）</li>
          <li style="width:143px">营业额合计（元）</li>
        </ul>
        <div style="display:flex;align-items: center">
          <div>
            <ul class="table-main-row" v-for="item in commissionDetail.commissionRuleInfoList" style="width:690px" :style="{background:!item.commissionAmount?'#EEEEF4':''}">
              <li style="width:137px">{{item.baseValDownLimit || '--'}}</li>
              <li style="width:138px">{{item.baseValUpLimit || '--'}}</li>
              <li style="width:103px">{{item.commissionPercent || '--'}}</li>
              <li style="width:111px">{{item.commissionDownLimit || '--'}}</li>
              <li style="width:109px">{{item.commissionUpLimit || '--'}}</li>
              <li style="width:106px">{{item.commissionAmount || '--'}}</li>
            </ul>
          </div>
          <ul class="total" :style="{height:commissionDetail.commissionRuleInfoList.length*41 + 'px'}">
            <li  style="width:127px" :style="{lineHeight:commissionDetail.commissionRuleInfoList.length*41 + 'px'}">{{commissionDetail.totalAmount || '--'}}</li>
            <li  style="width:143px" :style="{lineHeight:commissionDetail.commissionRuleInfoList.length*41 + 'px'}">{{commissionDetail.turnoverAmount || '--'}}</li>
          </ul>
        </div>
      </div>
    </div>

    <button type="button" class="btn n-btn-primary mr-10" @click="commissionBut"
      v-if="detailData.commissonConfirmFlag == 'WTJ'" v-show="permissions.indexOf('c313') > -1">提交抽成</button>
  </div>

  <!-- 确认抽成 -->
  <div class="mark-yuce newAdd" v-if="isFlag">
    <div class="yuce-contains" style="width:480px;">
      <div class="title">确认抽成</div>
      <div class="close" @click="isFlag = false">x</div>
      <div class="yuce-orge">
        <div>正在确认<span style="color:#565E99;padding: 0 5px">{{detailData.customerName}} <span style="padding:0 5px"></span> {{detailData.beginDate | formatDate}} 至 {{detailData.endDate | formatDate}}</span>抽成金额</div>
        <ul>
          <li>收款截止日：<span>{{date}}</span></li>
          <li>营业额合计：<span>{{detailData.turnoverInfoListAmount}}</span></li>
          <li>营业额确认：{{turnover_amount}} <span style="margin-left:40px;color:#999">抽成金额合计：<span
                style="color:#EA733D">{{commissionDetail.totalAmount}}元</span></span></li>
        </ul>
      </div>
      <div class="orge-footer text-center">
        <button type="button" class="btn n-btn-primary" style="width:90px;min-width:80px;margin-right:120px"
          @click="commissionSubmit">确认添加</button>
        <button type="button" class="btn n-btn-outline" @click="isFlag = false">取消</button>
      </div>
    </div>
  </div>
</section>
<script src="modules/contract/scripts/commission_detail.js" charset="utf-8"></script>
<style>
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
</style>
